<template>
  <div>
    <el-card>
      <div>
        <div style="text-align: left">注意：不在误差范围，也会生成问题件。</div>
        <el-button-group class="btn-group">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-plus"
            @click="addLine"
          >添加行
          </el-button>
          <el-button
            type="success"
            size="mini"
            @click="save"
          >
            保存
          </el-button>
        </el-button-group>
      </div>

      <el-table
        :data="tableData"
        style="width: 100%" border>
        <el-table-column
          label="计费重段"
          align="center"
          min-width="40%">
          <template slot-scope="scope">
            <el-row :gutter="10">
              <el-col :span="10"><el-input type="number" v-model="scope.row.feeWeightRangeStart"></el-input></el-col>
              <el-col :span="4">---</el-col>
              <el-col :span="10"><el-input type="number" v-model="scope.row.feeWeightRangeEnd"></el-input></el-col>
            </el-row>
          </template>
        </el-table-column>

        <el-table-column
          label="比例段((九方-客户)/客户)"
          align="center"
          min-width="40%">
          <template slot-scope="scope">
            <el-row :gutter="10">
              <el-col :span="10"><el-input type="number" placeholder="如-0.02" v-model="scope.row.ratioRangeStart"></el-input></el-col>
              <el-col :span="4">---</el-col>
              <el-col :span="10"><el-input type="number" placeholder="如0.02" v-model="scope.row.ratioRangeEnd"></el-input></el-col>
            </el-row>
          </template>
        </el-table-column>

        <el-table-column
          label="差额段(九方-客户)"
          align="center"
          min-width="40%">
          <template slot-scope="scope">
            <el-row :gutter="10">
              <el-col :span="10"><el-input type="number" placeholder="如-10" v-model="scope.row.differAmountRangeStart"></el-input></el-col>
              <el-col :span="4">---</el-col>
              <el-col :span="10"><el-input type="number" placeholder="如10" v-model="scope.row.differAmountRangeEnd"></el-input></el-col>
            </el-row>
          </template>
        </el-table-column>

        <el-table-column
          label="操作"
          align="center"
          min-width="10%">
          <template slot-scope="scope">
            <el-row>
              <el-col>
                <el-button size="mini" @click="delRow(scope)">删除</el-button>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <el-form-item prop="customerIds"   label="已选客户">
        <el-select v-model="customerIds"  multiple filterable clearable>
          <el-option
            v-for="(itm, idx) in customerAllSource"
            :key="parseInt(idx)"
            :label="itm"
            :value="parseInt(idx)"
          />
        </el-select>
      </el-form-item>
    </el-card>
  </div>
</template>

<script>
  import { ajax } from "@/store/yg/common/utils";
  import { closeDialog } from "@/utils";

  export default {
    data() {
      return {
        tableData: [{
          feeWeightRangeStart: '',
          feeWeightRangeEnd: '',
          ratioRangeStart: '',
          ratioRangeEnd: '',
          differAmountRangeStart: '',
          differAmountRangeEnd: ''
        }],
        customerParams: {},
        customerIds:{},
        customerAllSource:{}
      }
    },
    mounted() {
      this.customerIds=this.$store.state.edit.ids;
      this.init();
    },
    methods: {
      async init() {
        const attrs = {
          class: "com.tofba.app.client.customer.CustomerBalanceDetailClient"
        };
        let initRes = await ajax("init", {}, attrs);
        console.log(initRes);
        if (!initRes) {
          this.$message.error("初始化页面信息失败，请刷新重试");
          return;
        }
        this.customerAllSource=initRes.customerAllSource;
      },
      save() {
        //debugger;
        let tableData = this.tableData;
        let rowNum = 0;

        //校验
        for (const item of tableData) {
          //处理空值，便于下方判断
          item.feeWeightRangeStart = item.feeWeightRangeStart == null ? '' : item.feeWeightRangeStart;
          item.feeWeightRangeEnd = item.feeWeightRangeEnd == null ? '' : item.feeWeightRangeEnd;
          item.ratioRangeStart = item.ratioRangeStart == null ? '' : item.ratioRangeStart;
          item.ratioRangeEnd = item.ratioRangeEnd == null ? '' : item.ratioRangeEnd;
          item.differAmountRangeStart = item.differAmountRangeStart == null ? '' : item.differAmountRangeStart;
          item.differAmountRangeEnd = item.differAmountRangeEnd == null ? '' : item.differAmountRangeEnd;

          //校验计费重段是否填写
          if (item.feeWeightRangeStart === '' || item.feeWeightRangeEnd === '') {
            let msg = "请填写计费重段";
            this.$message.error(msg);
            return;
          } else {
            //起始值和结束值都填写了
            //只能填正数
            if (new Number(item.feeWeightRangeStart) < 0 || new Number(item.feeWeightRangeEnd) < 0) {
              this.$message.error("计费重段数值只能填正数");
              return;
            }
            //结束值必须大于起始值
            if (new Number(item.feeWeightRangeStart) >= new Number(item.feeWeightRangeEnd)) {
              this.$message.error("计费重段结束值需大于起始值");
              return;
            }
            //第一行的起始值必须为0
            if (rowNum == 0) {
              if (new Number(item.feeWeightRangeStart) != 0) {
                this.$message.error("计费重段第一行的起始值必须为0");
                return;
              }
              rowNum ++;
            }
          }

          //不能全不填
          if (item.ratioRangeStart === '' && item.ratioRangeEnd === '' && item.differAmountRangeStart === '' && item.differAmountRangeEnd === '') {
            let msg = "请填写计费重段" + "(" + item.feeWeightRangeStart + "," + item.feeWeightRangeEnd + "]" + "的误差范围";
            this.$message.error(msg);
            return;
          }

          //不能全填
          if (!(item.ratioRangeStart === '') && !(item.ratioRangeEnd === '') && !(item.differAmountRangeStart === '') && !(item.differAmountRangeEnd === '')) {
            let msg = "计费重段" + "(" + item.feeWeightRangeStart + "," + item.feeWeightRangeEnd + "]" + "，比例与差额不允许同时填写";
            this.$message.error(msg);
            return;
          }
          //校验比例段数值
          //比例段的值，不能只填一个
          if ((!(item.ratioRangeStart === '') && item.ratioRangeEnd === '') || (item.ratioRangeStart === '' && !(item.ratioRangeEnd === ''))) {
            let msg = "计费重段" + "(" + item.feeWeightRangeStart + "," + item.feeWeightRangeEnd + "]" + "，比例段请填写完整";
            this.$message.error(msg);
            return;
          }
          //右边的值必须比左边大，且左边的值必须小于等于0
          if (!(item.ratioRangeStart === '') && !(item.ratioRangeEnd === '')) {
            if (new Number(item.ratioRangeStart) > 0) {
              this.$message.error("比例段起始值必须小于等于0");
              return;
            }
            if (new Number(item.ratioRangeStart) > new Number(item.ratioRangeEnd)) {
              let msg = "计费重段" + "(" + item.feeWeightRangeStart + "," + item.feeWeightRangeEnd + "]" + "，数据填写错误";
              this.$message.error(msg);
              return;
            }
          }
          //校验差额段数值
          //差额段的值，不能只填一个
          if ((!(item.differAmountRangeStart === '') && item.differAmountRangeEnd === '') || (item.differAmountRangeStart === '' && !(item.differAmountRangeEnd === ''))) {
            let msg = "计费重段" + "(" + item.feeWeightRangeStart + "," + item.feeWeightRangeEnd + "]" + "，差额段请填写完整";
            this.$message.error(msg);
            return;
          }
          //右边的值必须比左边大，且左边的值必须小于等于0
          if (!(item.differAmountRangeStart === '') && !(item.differAmountRangeEnd === '')) {
            if (new Number(item.differAmountRangeStart) > 0) {
              this.$message.error("差额段起始值必须小于等于0");
              return;
            }
            if (new Number(item.differAmountRangeStart) > new Number(item.differAmountRangeEnd)) {
              let msg = "计费重段" + "(" + item.feeWeightRangeStart + "," + item.feeWeightRangeEnd + "]" + "，数据填写错误";
              this.$message.error(msg);
              return;
            }
          }
        }

        //校验计费重段的连续性
        if (tableData.length > 1) {
          for (let i = 1; i < tableData.length; i++) {
            let line2Start = tableData[i].feeWeightRangeStart;//第二行start
            let line1End = tableData[i-1].feeWeightRangeEnd;//第一行end
            if (line2Start != line1End) {
              this.$message.error("计费重段必须是连续的区间");
              return;
            }
          }
        }

        //校验是否小于-30或大于30
        let existMatch = false;
        let msg = "";
        for (const item of tableData) {
          let bool = false;
          let numbers = [];
          numbers.push(item.ratioRangeStart);
          numbers.push(item.ratioRangeEnd);
          numbers.push(item.differAmountRangeStart);
          numbers.push(item.differAmountRangeEnd);
          for (const number of numbers) {
            if (number < -30 || number > 30) {
              bool = true;
              existMatch = true;
              break;
            }
          }

          if (bool) {
            let itemMsg = "请确认计费重段" + "(" + item.feeWeightRangeStart + "," + item.feeWeightRangeEnd + "]" + "的数值；";
            msg += itemMsg;
          }
        }
        //存在满足条件的数值，需弹出对话框确认后再提交请求至后台
        if (existMatch) {
          this.openDialog(msg);
        } else {
          this.ajaxReq();
        }
      },

      addLine() {
        let item = {
          feeWeightRangeStart: '',
          feeWeightRangeEnd: '',
          ratioRangeStart: '',
          ratioRangeEnd: '',
          differAmountRangeStart: '',
          differAmountRangeEnd: ''
        }
        this.tableData.push(item);
      },

      delRow(s) {
        this.tableData.splice(s.$index, 1)
      },

      openDialog(msg) {
        this.$confirm(msg, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          center: true,
          type: 'danger',
        }).then(() => {
          this.ajaxReq();
        }).catch(() => {
        });
      },

      async ajaxReq() {
        let ids = this.$store.state.edit.ids;
        this.customerParams.seaAirErrorRangeList = this.tableData;
        this.customerParams.ids = this.customerIds;
        this.customerParams.seaAirErrorRangeType = 2;//海运
        const { code, data, message } = await ajax(
          "batchUpdateSeaAirErrorRange",
          this.customerParams
        );
        if (code === 200) {
          this.$message({
            type: "success",
            message: "保存成功！"
          });
          closeDialog();
        } else {
          if (message) {
            this.$message.error(message);
          } else {
            this.$message.error("服务器异常");
          }
        }
      }
    }
  }
</script>

<style>

</style>
